# 总报价页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

客户在提交需求后，需要通过AI智能报价功能快速了解服务的预计总金额，以便对服务成本有初步认知。目前客户无法快速获得报价信息，需要等待顾问人工报价，效率低且体验差。客户需要一个总报价页面，展示AI初步估算的预计总金额，并提供报价说明和后续操作指引，让客户能够快速了解服务价格，并引导客户填写详细需求以获取更准确的报价，提升报价效率和客户体验。

需求价值（补充对业务的价值）：

1. **提升报价效率**：通过AI智能报价功能，客户可以快速获得初步报价，无需等待顾问人工报价，大幅提升报价效率。
2. **降低沟通成本**：客户可以自主查看预计总金额和报价说明，减少"服务多少钱"、"包含什么服务"这类基础咨询，降低沟通成本。
3. **引导需求完善**：通过展示AI初步估算和温馨提示，引导客户填写详细需求，获取更准确的报价，提升需求质量。
4. **提升客户体验**：客户可以快速了解服务价格和包含内容，建立对服务的初步认知，提升客户体验和满意度。
5. **促进业务转化**：通过展示报价说明和服务内容，让客户了解服务价值，促进需求转化为订单。
6. **支持业务数据分析**：通过总报价数据，可以分析客户对价格的接受度、需求转化率等，支持业务决策。

需求目标（说明该需求要解决的问题或达成的目标）：

1. **展示AI预计总金额**：作为报价总览的核心信息，突出显示AI初步估算的预计总金额，让客户快速了解服务价格。
2. **提供报价说明**：展示报价包含的服务内容、预计周期、后续支持等信息，让客户全面了解报价内容。
3. **引导需求完善**：通过温馨提示和操作按钮，引导客户填写详细需求，获取更准确的报价。
4. **支持页面导航**：提供返回按钮，支持客户返回上一页面。
5. **支持后续操作**：提供"获取客户经理支持"按钮，支持客户跳转到填写细节需求页面。
6. **记录相关线索**：记录客户相关线索，包括客户姓名、联系方式、需求描述、报价金额等。

用户故事（不同的视角下，希望的结果）：

**作为客户，我希望：**
- 能够快速查看AI初步估算的预计总金额，对服务价格有初步认知。
- 能够了解报价包含的服务内容、预计周期、后续支持等信息，全面了解报价内容。
- 能够看到温馨提示，了解AI初步估算的局限性，知道需要填写详细需求才能获得更准确的报价。
- 能够通过"获取客户经理支持"按钮，快速跳转到填写细节需求页面，获取更准确的报价。
- 能够通过返回按钮返回上一页面。

**作为顾问，我希望：**
- 客户能够通过AI智能报价快速了解服务价格，减少"服务多少钱"这类基础咨询，让我有更多时间处理核心业务。
- 客户能够通过总报价页面了解报价包含的服务内容，减少因信息不对称导致的沟通成本。
- 客户能够被引导填写详细需求，让我能够基于更完整的信息提供更准确的报价。
- 能够记录客户相关线索，包括客户姓名、联系方式、需求描述、报价金额等。

**作为产品经理，我希望：**
- 总报价页面能够提升报价效率，降低沟通成本，提升整体服务效率。
- 通过AI智能报价功能，建立透明的报价机制，提升客户对报价的信任度。
- 通过引导客户填写详细需求，提升需求质量，支持更准确的报价。
- 总报价页面作为报价流程的重要环节，能够引导客户完成后续操作。

需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 包含以下主要区域（从上到下）：
  - 顶部导航栏（固定顶部，包含返回按钮、标题）
  - 预计总金额区域（主色调背景卡片，包含AI预计总金额标题、金额数字、说明文字）
  - 温馨提示区域（白色卡片，包含提示图标、标题、说明文字）
  - 报价说明区域（白色卡片，包含标题、服务说明列表）
  - 底部操作按钮区域（固定底部，包含"获取客户经理支持"按钮）

**2. 导航栏**
- 左侧显示返回按钮（箭头图标），点击后返回上一页面（通常是首页或需求提交页）
- 中间显示标题"总报价"
- 导航栏固定在顶部，滚动时保持可见

**3. 预计总金额展示**
- **背景**：使用主色调（蓝紫色）背景，圆角卡片，居中显示
- **标题**：显示"AI预计总金额"，使用较小字体，白色文字，半透明效果
- **金额数字**：显示预计总金额，使用超大字体（5xl），加粗，白色文字，带千分位分隔符（如"¥15,000"）
- **说明文字**：显示"基于您的需求初步估算"，使用较小字体，白色文字，半透明效果
- **数据来源**：从后端获取AI智能报价结果，包括预计总金额
- **数据计算规则**：
  - 根据客户选择的服务类型和需求描述，调用AI智能报价接口
  - AI根据历史报价数据、服务类型、需求复杂度等因素，计算预计总金额
  - 预计总金额为初步估算，可能根据详细需求进行调整

**4. 温馨提示展示**
- **布局**：白色背景卡片，圆角，包含图标、标题、说明文字
- **图标**：显示信息图标（info-circle），主色调
- **标题**：显示"温馨提示"，加粗显示
- **说明文字**：显示提示内容，说明AI初步估算的局限性，引导客户填写详细需求
- **内容**："此金额为AI初步估算，最终报价可能根据您的具体需求细节进行调整。请点击下方按钮填写详细需求，以便我们为您提供更准确的报价。"

**5. 报价说明展示**
- **标题**：显示"报价说明"，加粗显示
- **说明列表**：垂直排列，每个说明项包含：
  - 左侧：勾选图标（check-circle），绿色
  - 右侧：说明内容，包括标题和描述
- **说明项内容**：
  - **包含服务**：标题"包含服务"，描述"开发、测试、部署等全部费用"
  - **预计周期**：标题"预计周期"，描述"根据需求复杂度，预计2-4周完成"
  - **后续支持**：标题"后续支持"，描述"提供3个月免费技术支持"
- **数据来源**：报价说明内容可以配置，从后端获取或前端固定显示

**6. 底部操作按钮**
- **布局**：固定在页面底部，横向排列，主色调背景，白色文字
- **按钮内容**：显示"获取客户经理支持"，包含编辑图标
- **点击行为**：点击后跳转到填写细节需求页面（customer-requirement-submit.html）
- **跳转参数**：可以传递服务类型、需求描述等参数，保持上下文信息

**7. 数据获取规则**
- **接口调用**：
  - 页面加载时，调用后端接口获取AI智能报价结果
  - 接口需要传递服务类型和需求描述参数（从上一页面或URL参数获取）
  - 接口需要传递当前登录用户的ID或token（用于权限验证）
  - 接口返回AI智能报价结果，包括：
    - 预计总金额
    - 报价说明内容（可选）

**8. 页面跳转规则**
- **返回按钮**：点击导航栏左侧返回按钮，返回上一页面（通常是首页或需求提交页）
- **获取客户经理支持按钮**：点击后跳转到填写细节需求页面（customer-requirement-submit.html），可以传递以下参数：
  - 服务类型
  - 需求描述（如果上一页面有输入）

**9. 空状态处理**
- **报价数据不存在时**：显示"暂无报价数据"错误提示，支持返回上一页面
- **报价计算失败时**：显示"报价计算失败，请稍后重试"错误提示，支持重试

**10. 加载状态处理**
- 数据加载时，显示加载动画或骨架屏
- 加载失败时，显示错误提示和重试按钮
- AI智能报价计算可能需要一定时间，需要显示计算中的状态

**11. 异常处理**
- 网络请求失败时，显示友好的错误提示，支持重试
- 数据格式错误时，显示错误提示，不影响页面基本显示
- AI智能报价计算失败时，显示错误提示，支持重试
- 参数缺失时，显示错误提示，支持返回上一页面重新操作

**12. 金额格式化规则**
- 预计总金额需要格式化显示，带千分位分隔符（如"¥15,000"）
- 金额数字使用超大字体，突出显示
- 金额为0或负数时，显示"待计算"或"计算中"

**13. 响应式设计**
- 页面最大宽度限制为414px（移动端适配）
- 内容区域支持垂直滚动
- 底部操作按钮固定在底部，滚动时保持可见

验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 导航栏固定在顶部，包含返回按钮和标题
- [ ] 预计总金额区域正确显示，主色调背景，包含标题、金额数字、说明文字
- [ ] 温馨提示区域正确显示，包含图标、标题、说明文字
- [ ] 报价说明区域正确显示，包含标题和说明列表
- [ ] 底部操作按钮固定在底部，正确显示

**2. 预计总金额展示验收**
- [ ] AI预计总金额标题正确显示，白色文字，半透明效果
- [ ] 金额数字正确显示，超大字体，加粗，白色文字，带千分位分隔符
- [ ] 说明文字正确显示，白色文字，半透明效果
- [ ] 金额数据从后端正确获取，格式正确

**3. 温馨提示展示验收**
- [ ] 提示图标正确显示，主色调
- [ ] 标题"温馨提示"正确显示，加粗
- [ ] 说明文字正确显示，内容完整

**4. 报价说明展示验收**
- [ ] 标题"报价说明"正确显示，加粗
- [ ] 说明列表正确显示，包含3个说明项
- [ ] 每个说明项的勾选图标正确显示，绿色
- [ ] 每个说明项的标题和描述正确显示
- [ ] 说明项内容完整：包含服务、预计周期、后续支持

**5. 底部操作按钮验收**
- [ ] 按钮正确显示，主色调背景，白色文字
- [ ] 按钮固定在页面底部，滚动时保持可见
- [ ] 点击按钮后正确跳转到填写细节需求页面
- [ ] 跳转时正确传递服务类型、需求描述等参数

**6. 交互功能验收**
- [ ] 点击导航栏返回按钮后，正确返回上一页面
- [ ] 所有可点击元素都有点击反馈效果
- [ ] 页面滚动流畅，无卡顿现象

**7. 数据获取验收**
- [ ] 页面加载时，正确调用后端接口获取AI智能报价结果
- [ ] 接口正确传递服务类型、需求描述参数和用户身份信息
- [ ] 返回的数据正确解析和展示
- [ ] 数据加载时，正确显示加载状态
- [ ] 数据加载失败时，正确显示错误提示和重试按钮

**8. 空状态处理验收**
- [ ] 报价数据不存在时，正确显示"暂无报价数据"错误提示，支持返回上一页面
- [ ] 报价计算失败时，正确显示"报价计算失败，请稍后重试"错误提示，支持重试

**9. 异常处理验收**
- [ ] 网络请求失败时，正确显示错误提示，支持重试
- [ ] 数据格式错误时，正确显示错误提示
- [ ] AI智能报价计算失败时，正确显示错误提示，支持重试
- [ ] 参数缺失时，正确显示错误提示，支持返回上一页面重新操作

**10. 金额格式化验收**
- [ ] 预计总金额正确格式化，带千分位分隔符（如"¥15,000"）
- [ ] 金额数字使用超大字体，突出显示
- [ ] 金额为0或负数时，正确显示"待计算"或"计算中"

**11. 响应式设计验收**
- [ ] 页面最大宽度限制为414px，移动端适配正确
- [ ] 内容区域支持垂直滚动
- [ ] 底部操作按钮固定在底部，滚动时保持可见

**12. 性能要求验收**
- [ ] 页面加载时间不超过2秒
- [ ] 页面滚动流畅，无卡顿现象
- [ ] AI智能报价计算响应及时，无明显延迟
- [ ] 操作响应及时，无明显延迟

**13. 数据准确性验收**
- [ ] AI智能报价结果与后端计算一致
- [ ] 预计总金额数据准确，格式正确
- [ ] 报价说明内容与配置一致

**14. 业务规则验收**
- [ ] AI智能报价根据服务类型和需求描述正确计算
- [ ] 预计总金额为初步估算，提示客户需要填写详细需求
- [ ] 跳转到填写细节需求页面时，正确传递上下文信息